<template>
  <div class="list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-grid :column-num="2" gutter="4" :border="false">
        <van-grid-item
          v-for="prod in list"
          :key="prod.id"
          :to="{name: 'detail', params: {id: prod.id}}"
        >
          <van-image :src="prod.image" />
          <div class="title van-ellipsis">{{prod.title}}</div>
          <div class="desc">
            <div class="price">￥{{prod.price}}</div>
            <div class="fee">
              <van-tag plain type="primary" v-if="prod.isFreePostage" color="#666">包邮</van-tag>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import { getList } from '@/api/category'
export default {
  name: 'List',
  data() {
    return {
      url: '',
      list: [],
      loading: false,
      finished: false,
      nextIndex: 0,
    }
  },
  created() {
    this.url = this.$route.query.url
  },
  methods: {
    onLoad() {
      getList(this.url, this.nextIndex)
        .then(data => {
          const { list, nextIndex, isEnd } = data
          this.list = [...this.list, ...list]
          this.nextIndex = nextIndex
          this.finished = isEnd
          this.loading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
  .title {
    width: 320px;
  }
  .desc {
    width: 320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .price {
      color: #f00;
      font-size: 20px;
    }
  }
</style>
